<template>
  <van-popup
    v-model:show="show"
    @open="refresh"
    style="width: 400px"
    round
    @click-overlay="closeModal"
  >
    <div v-if="!error" class="rounded m-2 p-2">
      <div class="w-full p-2 border-b mb-2">代收费率</div>
      <div :key="index" v-for="(item, index) in info" class="mb-1">
        <div class="flex justify-between text-sm font-bold">
          <span>
            <span class="text-red-500">*</span>
            {{ item.title }}</span
          >
          <span>我的费率: {{ item.rate_self }}%</span>
        </div>
        <div class="flex justify-between items-center">
          <div class="flex text-sm items-center">
            <div>当前费率：</div>
            <input type="number" :value="item.rate" readonly class="border w-20 rounded p-1" />
          </div>
          <div class="flex text-sm items-center">
            <div>设置费率：</div>
            <input
              type="number"
              v-model="formRef[item.code]"
              class="w-20 border rounded p-1"
              placeholder="请设置"
            />
          </div>
        </div>
      </div>
    </div>
    <div v-else class="rounedd m-2 p-2 text-red-500 font-black text-lg">错误：无权限</div>
    <div class="m-2 flex justify-between">
      <button
        @click="closeModal"
        class="border border-white rounded text-black bg-gray-100 px-4 py-1"
      >
        返回
      </button>
      <button
        :disabled="error"
        @click="submit"
        class="border border-white rounded text-white bg-blue-500 px-4 py-1"
      >
        保存
      </button>
    </div>
  </van-popup>
</template>
<script setup lang="ts">
import { defineEmits, ref, computed, onMounted } from 'vue'
import { EditRateCodeApi } from '@/apis/group'
import { GetRateCodeApi, getCollectionApi } from '@/apis/collection'
import { showNotify } from 'vant'

const emit = defineEmits(['close'])

const info = ref({})
const list = ref({})

const formRef = ref({})
const error = ref(false)

const props = defineProps({
  showModal: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: ''
  }
})

const show = computed({
  get() {
    return props.showModal || false
  },
  set(val) {
    show.value = val
  }
})

onMounted(async () => {
  const data1 = await getCollectionApi({ page: 1, pageSize: 100 })
  list.value = data1.list
  try {
    const data = await GetRateCodeApi(props.id)
    info.value = data
    info.value.forEach((element) => {
      list.value.forEach((i) => {
        if (element.code == i.ball.code) {
          element.rate_self = i.rate
        }
      })
    })
  } catch (e) {
    error.value = true
  }
})

async function refresh() {
  const data1 = await getCollectionApi({ page: 1, pageSize: 100 })
  list.value = data1.list
  const data = await GetRateCodeApi(props.id)
  info.value = data
  info.value.forEach((element) => {
    list.value.forEach((i) => {
      if (element.code == i.ball.code) {
        element.rate_self = i.rate
      }
    })
  })
  formRef.value = {}
}

function submit() {
  Object.keys(formRef.value).forEach((key) => {
    EditRateCodeApi({ agentId: props.id, rate: formRef.value[key], code: key })
  })
  showNotify({ type: 'success', message: '修改成功' })
  refresh()
  closeModal()
}

function closeModal() {
  emit('close')
}
</script>
